<template>
  <div class="ToolQuery">
    <!-- <el-button class="toolBtn btn" @click="openTool(categoryTabs?categoryTabs:'AP')">{{$t('adv.toolBtn')}}</el-button> -->
    <div class="toolBtn" @click="openTool(categoryTabs ? categoryTabs : 'AP')">
      <i class="iconfont icon-gongjuchaxun"></i>
      <span>工具查询</span>
    </div>
    <el-dialog
      title="辅助查询工具"
      :visible.sync="toolVisible"
      append-to-body
      width="130vh"
      custom-class="SearchTool"
      center
    >
      <div class="main">
        <div class="categoryTabs">
          <span
            v-if="categoryTabs == 'AP'"
            :class="{ active: categoryTabs == 'AP' }"
            @click="categoryClick('AP')"
            >公司 /
            申请人</span
          >
          <span
            v-if="categoryTabs == 'IPC'"
            :class="{ active: categoryTabs == 'IPC' }"
            @click="categoryClick('IPC')"
            >IPC分类</span
          >
          <span
            v-if="categoryTabs == 'LOC'"
            :class="{ active: categoryTabs == 'LOC' }"
            @click="categoryClick('LOC')"
            >洛迦诺分类</span
          >
          <!-- <span v-if="categoryTabs == 'TIABC'" :class="{active: categoryTabs == 'TIABC'}" @click="categoryClick('TIABC')">{{$t("adv.searchTool-nav4")}}</span> -->
          <span
            v-if="categoryTabs == 'PNC'"
            :class="{ active: categoryTabs == 'PNC' }"
            @click="categoryClick('PNC')"
            >国家代码</span
          >
          <!-- <span :class="{active: categoryTabs == 'AP-PC'}" @click="categoryClick('AP-PC')">Province code</span> -->
        </div>
        <div class="searchCon clearfix">
          <span class="seaech-title fl">查询内容</span>
          <el-input
            placeholder="请输入关键词"
            v-model="searchInput"
            @keyup.enter.native="toolSearch"
          >
            <el-button slot="append" @click="toolSearch" class="btn">
              <i class="iconfont icon-sousuo"></i>
            </el-button>
          </el-input>
          <span
            class="reset fr"
            @click="
              searchInput = '';
              openTool(categoryTabs, searchInput);
            "
            >重置</span
          >
        </div>
        <div class="transferCon clearfix">
          <div class="leftCon fl">
            <div class="content">
              <tree-list
                v-for="(item, i) in transferData"
                :node="item"
                :key="item.id"
                @chooseTree="chooseTree"
                @getSomeChild="getSomeChild"
              ></tree-list>
            </div>
          </div>
          <div class="transferBtns fl">
            <div class="transferBtnsCon">
              <div class="transferRight" @click="transferRight">
                <img src="@/assets/img/transfer-right.png" />
              </div>
              <div class="transferLeft" @click="transferLeft">
                <img src="@/assets/img/transfer-left.png" />
              </div>
            </div>
          </div>
          <div class="rightCon fl">
            <div class="content">
              <div
                class="transferData"
                v-for="(i, index) in selecedtData"
                :key="index"
              >
                <div class="transferLabel">
                  <el-checkbox v-model="i.checked">
                    <span
                      class="transferNum"
                      v-if="i.num"
                      :title="i.num === i.name ? i.num : ''"
                      >{{ i.num }}</span
                    >
                    <span class="transferName" :title="i.name">{{
                      i.num === i.name ? "" : i.name
                    }}</span>
                  </el-checkbox>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-checkbox v-model="toolChecked">{{$t("adv.searchTool-btn2")}}</el-checkbox> -->
        <!-- <el-button class=" btn" @click="directSearch">{{$t("adv.searchTool-btn3")}}</el-button> -->
        <el-button class="btn" type="primary" @click="commandSearch">转入指令检索</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import URL from "../../js/urlConfig.js";
import "@/static/icon/iconfont.js";
import TreeList from "./TreeList";
export default {
  props: ["tabs", "toolSq"],
  name: "ToolQuery",
  data() {
    return {
      toolChecked: true,
      toolVisible: false,
      categoryTabs: "AP",
      searchInput: "",
      transferData: [
        {
          id: "1",
          num: "010038",
          name: "海欣股份",
          open: true,
          checked: false,
          children: [
            {
              id: "11",
              num: "010038-001",
              name: "上海海欣集团股份有限公司",
              open: false,
              checked: false,
              children: [
                {
                  id: "111",
                  num: "010038-001-other",
                  name: "其他子公司",
                  open: false,
                  checked: false,
                  children: [
                    {
                      id: "1111",
                      num: "",
                      name: "其他子公司1",
                      open: false,
                      checked: false,
                    },
                    {
                      id: "1112",
                      num: "",
                      name: "其他子公司1",
                      open: false,
                      checked: false,
                    },
                    {
                      id: "1113",
                      num: "",
                      name: "其他子公司1",
                      open: false,
                      checked: false,
                    },
                    {
                      id: "1114",
                      num: "",
                      name: "其他子公司1",
                      open: false,
                      checked: false,
                    },
                    {
                      id: "1115",
                      num: "",
                      name: "其他子公司1",
                      open: false,
                      checked: false,
                    },
                    {
                      id: "1116",
                      num: "",
                      name: "其他子公司1",
                      open: false,
                      checked: false,
                    },
                    {
                      id: "1117",
                      num: "",
                      name: "其他子公司1",
                      open: false,
                      checked: false,
                    },
                    {
                      id: "1118",
                      num: "",
                      name: "其他子公司1",
                      open: false,
                      checked: false,
                    },
                    {
                      id: "1119",
                      num: "",
                      name: "其他子公司1",
                      open: false,
                      checked: false,
                    },
                    {
                      id: "1120",
                      num: "",
                      name: "其他子公司1",
                      open: false,
                      checked: false,
                    },
                    {
                      id: "1121",
                      num: "",
                      name: "其他子公司1",
                      open: false,
                      checked: false,
                    },
                    {
                      id: "1122",
                      num: "",
                      name: "其他子公司1",
                      open: false,
                      checked: false,
                    },
                    {
                      id: "1123",
                      num: "",
                      name: "其他子公司1",
                      open: false,
                      checked: false,
                    },
                    {
                      id: "1124",
                      num: "",
                      name: "其他子公司1",
                      open: false,
                      checked: false,
                    },
                    {
                      id: "1125",
                      num: "",
                      name: "其他子公司1",
                      open: false,
                      checked: false,
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      selecedtData: [],
      currNode: [],
    };
  },

  components: { TreeList },

  computed: {},

  methods: {
    init() {
      this.categoryTabs = this.tabs;
    },
    chooseTree(node) {
      if (node.checked) {
        this.currNode.push(node);
      } else {
        for (var i = 0; i < this.currNode.length; i++) {
          if (this.currNode[i].id === node.id) {
            this.currNode.splice(i, 1);
          }
        }
      }
    },
    getSomeChild(data) {
      this.openTool(this.categoryTabs, data);
    },
    /*
     * params: 无
     * return: 无
     * function: 打开辅助查询工具
     * */
    toolSearch: function (type) {
      if (this.searchInput !== "") {
        var it = "";
        if (this.categoryTabs == "IPC") {
          it = 2;
          var params = {
            sf: "QueryClass",
            sl: "chs",
            it: it,
            sq: this.searchInput,
          };
          var newURL = this.$Url.search.invokejson;
        } else if (this.categoryTabs == "LOC") {
          it = 3;
          var params = {
            sf: "QueryClass",
            sl: "chs",
            it: it,
            sq: this.searchInput,
          };
          var newURL = this.$Url.search.invokejson;
        } else if (this.categoryTabs == "AP") {
          it = 1;
          var params = {
            scontent: "an%10%\ndata%ct%",
            sq: "an/" + this.searchInput + " AND db/all",
            sf: "QueryFulltextAnalysis",
            idi: "536870655",
          };
          var newURL = this.$Url.search.invokeAuxiliaryApplicant;
        } else if (this.categoryTabs == "TIABC") {
          it = 4;
          var params = {
            sq: "C/" + this.searchInput + " AND db/cn",
            sf: "QueryRelated",
          };
          var newURL = this.$Url.search.invokejson;
        } else if (this.categoryTabs == "PNC") {
          it = 5;
          var params = { q: this.searchInput };
          var newURL = this.$Url.search.invokeCountry;
        }
        this.$post(newURL, params)
          .then((response) => {
            if (response.data.code == 200) {
              if (it == 1) {
                var ndata = response.data.data.sResult,
                  list = [];
                for (var i = 0; i < ndata.length; i++) {
                  list[i] = {
                    id: ndata[i].key,
                    num: ndata[i].key,
                    name: ndata[i].value,
                    open: false,
                    checked: false,
                  };
                }
              } else if (it == 2) {
                var ndata = response.data.data.ICLClassList,
                  list = [];
                for (var i = 0; i < ndata.length; i++) {
                  list[i] = {
                    id: ndata[i].key,
                    num: ndata[i].key,
                    name: ndata[i].value,
                    open: false,
                    checked: false,
                    children: [],
                  };
                }
              } else if (it == 3) {
                var ndata = response.data.data.LOCARNOClassList,
                  list = [];
                for (var i = 0; i < ndata.length; i++) {
                  list[i] = {
                    id: ndata[i].key,
                    num: ndata[i].key,
                    name: ndata[i].value,
                    open: false,
                    checked: false,
                    children: [],
                  };
                }
              } else if (it == 4) {
                var ndata = response.data.data.WordrelListMap,
                  list = [];
                for (var i = 0; i < ndata.length; i++) {
                  list[i] = {
                    id: ndata[i].key,
                    num: ndata[i].key,
                    name: ndata[i].value,
                    open: false,
                    checked: false,
                  };
                }
              } else if (it == 5) {
                var ndata = response.data.data,
                  list = [];
                for (var i = 0; i < ndata.length; i++) {
                  list[i] = {
                    id: ndata[i].key,
                    num: ndata[i].key,
                    name: ndata[i].value,
                    open: false,
                    checked: false,
                  };
                }
              }
              let sortArr1 = [],
                sortArr2 = [],
                searchEn = /[a-zA-Z]/i;
              list.forEach((v, i) => {
                if (v.num.search(searchEn)) {
                  sortArr1.push(v);
                } else {
                  sortArr2.push(v);
                }
              });
              list = sortArr1.concat(sortArr2);
              this.transferData = list;
            }
          })
          .catch((error) => {
            console.error(error);
          });
      } else {
        this.$message({
          message: "请输入检索内容！",
          duration: 1500,
          center: true,
        });
      }
    },
    openTool: function (type, key) {
      // this.selecedtData = [];
      this.toolVisible = true;
      let it = "",
        sn = "";
      if (!type) {
        let type = this.categoryTabs;
      }
      if (type == "IPC" || type == "LOC") {
        if (type == "IPC") {
          it = 2;
        } else if (type == "LOC") {
          it = 3;
        }
        if (key) {
          sn = key;
        }
        var params = { sf: "ShowPatentClass", sl: "chs", it: it, sn: sn };
        this.$post(this.$Url.invokejson, params)
          .then((response) => {
            if (response.data.code == 200) {
              if (it == 2) {
                var ndata = response.data.data.ICLClassList,
                  list = [],
                  childList = [];
              } else if (it == 3) {
                var ndata = response.data.data.LOCARNOClassList,
                  list = [],
                  childList = [];
              }
              if (sn === "") {
                for (var i = 0; i < ndata.length; i++) {
                  list[i] = {
                    id: ndata[i].key,
                    num: ndata[i].key,
                    name: ndata[i].value,
                    open: false,
                    checked: false,
                    children: [],
                  };
                }
                this.transferData = list;
              } else if (sn !== "") {
                if (JSON.stringify(ndata) !== "[]") {
                  for (var i = 0; i < ndata.length; i++) {
                    childList[i] = {
                      id: ndata[i].key,
                      num: ndata[i].key,
                      name: ndata[i].value,
                      open: false,
                      checked: false,
                      children: [],
                    };
                  }
                } else {
                  childList = null;
                }
                this.getSomeOne(this.transferData, sn, childList);
              }
            }
          })
          .catch((error) => {
            console.error(error);
          });
      } else if (type == "AP") {
        if (!key) {
          this.transferData = [];
        }
      } else if (type == "TIABC") {
        if (!key) {
          this.transferData = [];
        }
      } else if (type == "PNC") {
        this.$post(this.$Url.search.invokeCountry, { q: "" })
          .then((response) => {
            if (response.data.code == 200) {
              var ndata = response.data.data,
                list = [];
              if (sn === "") {
                for (var i = 0; i < ndata.length; i++) {
                  list[i] = {
                    id: ndata[i].key,
                    num: ndata[i].key,
                    name: ndata[i].value,
                    open: false,
                    checked: false,
                  };
                }
                this.transferData = list;
              }
            }
          })
          .catch((error) => {
            console.error(error);
          });
      }
    },
    getSomeOne: function (arr, key, list) {
      let flag = true;
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].id === key) {
          if (JSON.stringify(list) !== "[]" && list !== null) {
            arr[i].children = list;
          } else {
            arr[i].children = null;
          }
          return (flag = true);
        } else {
          flag = false;
        }
      }
      if (!flag) {
        for (var i = 0; i < arr.length; i++) {
          if (arr[i].children !== null) {
            this.getSomeOne(arr[i].children, key, list);
          }
        }
      }
    },
    removeRight(fd) {
      let indArr = [];
      for (var i = 0; i < fd.length; i++) {
        if (!fd[i].checked) {
          fd[i].checked = false;
          indArr.push(fd[i]);
        }
      }
      return indArr;
    },
    /*
     * params: 无
     * return: 无
     * function: 到右侧穿梭框
     * */
    transferRight: function () {
      let flag = true;
      for (var i = 0; i < this.currNode.length; i++) {
        if (this.selecedtData.length > 0) {
          flag = this.selecedtData.every((item) => {
            return this.currNode[i].id !== item.id;
          });
        }
        if (flag) {
          this.currNode[i].checked = false;
          this.selecedtData.push(JSON.parse(JSON.stringify(this.currNode[i])));
        }
      }
      this.currNode = [];
    },
    /*
     * params: 无
     * return: 无
     * function: 移除右侧穿梭框选中项
     * */
    transferLeft: function () {
      this.selecedtData = this.removeRight(this.selecedtData);
    },
    /*
     * params: 无
     * return: 无
     * function: 辅助查询工具直接查询
     * */
    directSearch: function () {
      let str = "";
      if (JSON.stringify(this.selecedtData) !== "[]") {
        var tabs = this.categoryTabs;
        if (tabs == "IPC") {
          tabs = "ICL";
        } else if (tabs == "PNC") {
          tabs = "ND";
        }
        if (this.selecedtData.length > 1) {
          for (var i = 0; i < this.selecedtData.length - 1; i++) {
            str += this.selecedtData[i].id + " OR ";
          }
          str =
            tabs +
            "/" +
            "(" +
            str +
            this.selecedtData[this.selecedtData.length - 1].id +
            ")";
        } else {
          str = tabs + "/" + "(" + this.selecedtData[0].id + ")";
        }

        if (this.textarea !== "") {
          this.textarea = this.textarea + " AND " + str;
        } else {
          this.textarea = str;
        }
      }
      this.toolVisible = false;
      this.InstructionSearch(str);
    },
    /*
     * params: 无
     * return: 无
     * function: 辅助查询工具转为指令
     * */
    commandSearch: function () {
      let str = "";
      if (JSON.stringify(this.selecedtData) !== "[]") {
        var tabs = this.categoryTabs;
        if (tabs == "IPC") {
          tabs = "ICL";
        } else if (tabs == "PNC") {
          tabs = "ND";
        }
        if (this.selecedtData.length > 1) {
          for (var i = 0; i < this.selecedtData.length - 1; i++) {
            str += this.selecedtData[i].id + " OR ";
          }
          str =
            "(" +
            str +
            this.selecedtData[this.selecedtData.length - 1].id +
            ")";
        } else {
          str = "(" + this.selecedtData[0].id + ")";
        }
        this.$emit("update:toolSq", str);
      }
      this.toolVisible = false;
    },
    categoryClick: function (type) {
      this.categoryTabs = type;
      this.openTool(type);
      this.selecedtData = [];
    },
  },

  mounted() {
    this.init();
  },
};
</script>
<style lang='scss'>
.ToolQuery {
  .toolBtn {
    font-size: 12px;
    color: $mainColor;
    cursor: pointer;
    line-height: 24px;
    display: flex;
    justify-content: space-between;
    width: 80px;
    & .iconfont{
      color: $mainColor;
      font-size: 20px;
    }
  }
}
.SearchTool {
  width: px2(1600);
  height: px2(1200);
  .el-dialog__header {
    background-color: #eef3fa;
    padding: 20px;
    border-bottom: 1px solid #dce7f6;
    text-align: left;
    .el-dialog__title {
      font-size: 14px;
      color: $mainColor;
    }
    .el-dialog__headerbtn {
      // display: none;
      .el-dialog__close {
        color: $mainColor;
      }
    }
  }
  .el-dialog__body {
    height: px2(960);
    padding: 0 20px 20px 20px;
    .main {
      height: px2(960);
      .categoryTabs {
        padding: 15px 0;
        border-bottom: 1px solid #dce7f6;
        text-align: left;
        span {
          font-weight: bold;
          padding: 0 px2(36);
          color: #9e9e9e;
          cursor: pointer;
          font-size: 12px;
          padding-bottom: 15px;
        }
        span.active {
          color: #000;
          border-bottom: 2px solid #75dafb;
        }
      }
      .searchCon {
        margin: 20px 0;
        text-align: left;
        width: 480px;
        .seaech-title {
          color: #9e9e9e;
          font-size: 12px;
          display: inline-block;
          padding-right: 20px;
          line-height: 40px;
        }
        .el-input-group {
          width: 336px;
          background-color: #fff;
          & input {
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            width: 270px;
            border-radius: 20px 0 0 20px;
          }
          .el-input-group__append {
            border-radius: 0 20px 20px 0;
            border: 1px solid #ebedf0;
            background-color: #dee1f2;
            color: $mainColor;
            & button {
              padding: 12px 25px;
            }
            .icon-sousuo {
              font-size: 18px;
            }
          }
        }
        .reset {
          color: $mainColor;
          margin: 0 px2(30);
          line-height: 40px;
          padding: 5px;
          font-size: 12px;
          cursor: pointer;
        }
      }
      .transferCon {
        width: 100%;
        height: px2(680);
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        .leftCon {
          width: 45%;
          height: 100%;
          border: 1px solid #dce7f6;
          box-sizing: border-box;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          padding: 10px 0;
        }
        .transferBtns {
          width: 10%;
          height: 100%;
          position: relative;

          .transferBtnsCon {
            position: absolute;
            left: 50%;
            top: 50%;
            margin: 0 auto;
            transform: translate(-50%, -50%);
          }
          .transferRight {
            width: px2(80);
            height: px2(60);
            margin-bottom: px2(60);
            cursor: pointer;
            & img {
              width: 100%;
            }
          }
          .transferLeft {
            width: px2(80);
            height: px2(60);
            cursor: pointer;
            & img {
              width: 100%;
            }
          }
        }
        .rightCon {
          width: 45%;
          height: 100%;
          border: 1px solid #dce7f6;
          box-sizing: border-box;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          padding: 10px 0;

          .transferData {
            position: relative;
            display: flex;
            justify-content: space-between;
            span.el-checkbox__label{
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: calc(100% - 20px);
              text-align: left;
            }
            .transferLabel {
              width: 100%;
              label.el-checkbox{
                display: flex;
                justify-content: space-around;
                width: 100%;
              }
              span.el-checkbox__input{
                line-height: 21px;
                float: left;
              }
              .transferNum {
                color: #9e9e9e;
                margin-right: px2(35);
              }
              .transferName {
                color: #000;
                white-space: pre-wrap!important;
                word-wrap: break-word!important;
              }
              .transferName.active {
                color: #5e5f75;
              }

            }
          }
        }
        .content {
          overflow-y: scroll;
          margin: 0 px2(20);
          height: 100%;
          margin-right: 5px;
          /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
          &::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            background-color: #fff;
          }

          /*定义滚动条轨道 内阴影+圆角*/
          &::-webkit-scrollbar-track {
            border-radius: 10px;
            background-color: #fff;
            border: 1px solid #fff;
          }

          /*定义滑块 内阴影+圆角*/
          &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            border: 1px solid #e5e5e5;
            background-color: #e5e5e5;
          }
        }
      }
    }
  }
  .dialog-footer {
    float: right;
    & .el-button {
      padding: 7px 16px;
      background-color: $mainColor;
      color: #fff;
      font-size: 12px;
      border-radius: 15px;
      border: 1px solid $mainColor;
      margin-left: 20px;
    }
    & .el-button:nth-child(2) {
      font-size: 12px;
      margin-left: 20px;
      padding: 7px 16px;
      border: 1px solid $mainColor;
      color: $mainColor;
      border-radius: 15px;
      background-color: #fff;
    }
  }
}
.tree-list .transferData .transferLabel .transferName{
  white-space: pre-wrap!important;
  word-wrap: break-word!important;
}
</style>
